<!-- @format -->

<template>
  <div>
    <span>
      全选:
      <input
        type="checkbox"
        v-model="isAll" />
    </span>
    <button @click="handleToggle">反选</button>
    <hr />
    <ul>
      <li
        v-for="obj in arr"
        :key="obj.id">
        <input
          type="checkbox"
          v-model="obj.done" />
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  // 数组.every()方法
  // 作用：检测数组中每个元素是否都满足指定的条件，如果都满足，则返回true；否则返回false
  // 注意：every()只要发现一个不满足条件的，立即结束比较，返回false
  export default {
    data() {
      return {
        arr: [
          { id: 1, name: '猪八戒', done: false },
          { id: 2, name: '孙悟空', done: false },
          { id: 3, name: '唐僧', done: false },
          { id: 4, name: '白龙马', done: false }
        ]
      }
    },
    computed: {
      // 完整写法 = get + set
      isAll: {
        get() {
          // return this.arr.every((obj) => obj.done)
          // 或者配合解构
          return this.arr.every(({ done }) => done)
        },
        set(flag) {
          // flag就是全选的状态
          // 通过遍历，把全选的状态赋值给每个对象的done属性即可
          this.arr.forEach((obj) => (obj.done = flag))
        }
      }
    },
    methods: {
      // 反选
      handleToggle() {
        // 遍历arr数组，把done属性取反在赋值回去
        this.arr.forEach((obj) => (obj.done = !obj.done))
      }
    }
  }
</script>
